﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>大学生知道交流平台登录</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../css/login.css" >
</head>
<body class="bg-light" background="../img/login-bg.png" style="background-repeat: no-repeat; background-attachment: fixed ; background-size: 100% 100%">
<div class="container-fluid" style="right: auto" id="loginApp">
  <div class="row">
    <div class="mx-auto mt-5" style="position: absolute; right: 197px; top: 50px">
      <h2 class="text-center "><b>大学生</b>知道交流平台</h2>
      <div class="bg-white p-4" >
        <p class="text-center">用户登录</p>
        <div id="error" class="alert alert-danger d-none">
          <i class="fa fa-exclamation-triangle"></i> 账号或密码错误
        </div>
        <div id="logout" class="alert alert-info d-none">
          <i class="fa fa-exclamation-triangle"></i> 已经登出系统
        </div>
        <div id="register" class="alert alert-info d-none">
          <i class="fa fa-exclamation-triangle"></i> 已经成功注册，请登录。
        </div>
        <form action="/login" method="post" @submit.prevent="login">
          <div class="form-group has-icon">
            <input type="text" class="form-control d-inline" name="username" placeholder="手机号" v-model="username" >
            <span class="fa fa-phone form-control-icon"></span>
          </div>
          <div class="form-group has-icon">
            <input type="password" class="form-control" name="password" placeholder="密码" v-model="password">
            <span class="fa fa-lock form-control-icon"></span>
          </div>
          <button type="submit" class="btn btn-primary btn-block ">登录</button>
        </form>
        <a class="d-block mt-1" href="resetpassword.html" >忘记密码？</a>
        <a class="d-block mt-1" href="register.html"  >新用户注册</a>
      </div>
    </div>
  </div>
</div>
<script src="bower_components/jquery/dist/jquery.js" ></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js" ></script>

<script src="bower_components/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  if (location.search == "?error"){
    $("#error").removeClass("d-none");
  }
  if (location.search == "?logout"){
    $("#logout").removeClass("d-none");
  }
  if (location.search == "?register"){
    $("#register").removeClass("d-none");
  }


  let loginApp =new Vue({
    el:"#loginApp",
    data:{
      username:"",
      password:""
    },
    methods:{
      login:function(){
        let form=new FormData();
        form.append("client_id","knows");
        form.append("client_secret","123456");
        form.append("grant_type","password");
        form.append("username",this.username);
        form.append("password",this.password);
        axios({
          url:"http://localhost:9000/oauth/token",
          method:"post",
          data:form
        }).then(function(response){
          //alert(response.data.access_token);
          console.log(response.data.access_token);
          //将我们获得的Jwt保存到浏览器(客户端)
          //浏览器保存信息的方式有两种
          //1.cookie
          //2.localStorage
          //将Jwt保存到localStorage
          window.localStorage.setItem(
                  "accessToken",response.data.access_token);
          //能运行到这里就是登录成功了!
          //登录成功,跳转到index.html判断身份跳转首页
          location.href="/index.html"
        }).catch(function(error){
          //登录失败运行这里,输出错误信息
          console.log(error);
        })
      }
    }
  })
</script>
</body>
</html>
